<template>
  <div class="add-member">
      <div class="add-member-title text-overflow">
          替代用户开户：【管理已有下级会员】
      </div>
      <div class="form-info-box">
          <el-form class="form-info" :label-position="'top'" ref="ruleForm" :rules="rules" label-width="100px" :model="formInfo">
            <el-form-item label="手机号码：" prop="phone">
              <el-input v-model="formInfo.phone"></el-input>
            </el-form-item>
            <el-form-item label="所属上级号码:" prop="invitecode">
              <el-input v-model="formInfo.invitecode"></el-input>
            </el-form-item>
            <div class="tips">【注意】： 所注册用户的默认登陆密码和支付密码均为“123456”</div>
            <el-form-item>
              <el-button size="large" type="primary" @click="submitForm('ruleForm')">提交</el-button>
              <el-button size="large" @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
      </div>
  </div>
</template>

<script>
import USB from "@/utils/USB.js"; // 获取url
export default {
  name:'add-member',
  data () {
    const validatePhone = (rule, value, callback)=>{
       if (value === '' || value === null) {
         return callback(new Error('手机号不能为空'));
       } 
       setTimeout(() => {
          if(/^[1][1-9][0-9]{4,9}/.test(value)){
            callback()
          }else{
            return callback(new Error('手机格式不正确'));
          }
       },500); 
    }

    return {
        formInfo:{
           phone:null,
           invitecode:null,
        },
        rules:{
           phone:[
             { validator: validatePhone, trigger: 'blur' }
           ],
            invitecode:[
               { validator: validatePhone, trigger: 'blur' }
            ]
        }
    };
  },
  components: {},
  created() {},
  mounted() {},
  methods: {
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.submitInfo()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    resetForm(formName) {
        this.$refs[formName].resetFields();
    },
    submitInfo(){
        console.log(this.formInfo);
        let brand_id = sessionStorage.getItem(3),
            brand_name = sessionStorage.getItem(100);
        let params = `phone=${this.formInfo.phone}&invitecode=${this.formInfo.invitecode}&brand_id=${brand_id}&brand_name=${brand_name}`;
        this.$Http.post(USB.U53,params).then(res=>{
           this.$notify.info({
              title: '消息',
              message: res.data.resp_message
            });        
       }).catch(err=>{
         this.$notify.error({
            title: '错误',
            message: '注册失败！'
          });
       })
    }
  }
}

</script>
<style scoped>
.add-member{
  box-sizing: border-box;
  padding: 20px;
}
.form-info-box{
  border: 1px solid #ededed;
  padding: 20px;
}
.form-info{
  max-width: 600px;
  min-width: 250px;
  border: 1px solid #ededed;
  padding: 20px;
}
.add-member-title{
  height: 50px;
  line-height: 50px;
  font-size: 26px;
  color: #409eff;
  padding: 5px 20px;
  border: 1px solid #ededed;
}
.tips{
  padding: 20px;
  color: red;
  border-bottom: 1px solid #ededed;
  margin-bottom: 20px;
}
</style>